<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const password = ref('')
const mouseX = ref(0)
const mouseY = ref(0)
const scrollOffset = ref(0)

// 大幅增加游戏背景的图片数量，确保背景可以占满全屏并实现重复轮播
const gameImages = [
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/2220330/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1179380/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1708720/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1426210/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1296610/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1938090/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/2220330/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1179380/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1708720/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1426210/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1296610/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1938090/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg'
  ]

// 弹幕数据 - 增加数量确保弹幕不间断
const bulletComments = ref([
  { id: 1, avatar: 'https://randomuser.me/api/portraits/men/32.jpg', content: '《赛博朋克2077》的剧情真的太棒了！', position: 200, top: Math.random() * 80 + 10 },
  { id: 2, avatar: 'https://randomuser.me/api/portraits/women/44.jpg', content: '《艾尔登法环》的开放世界设计让人惊叹', position: 150, top: Math.random() * 80 + 10 },
  { id: 3, avatar: 'https://randomuser.me/api/portraits/men/67.jpg', content: '《死亡搁浅》的世界观设计太有深度了', position: 100, top: Math.random() * 80 + 10 },
  { id: 4, avatar: 'https://randomuser.me/api/portraits/women/22.jpg', content: '《英雄联盟》S13世界赛太精彩了！', position: 50, top: Math.random() * 80 + 10 },
  { id: 5, avatar: 'https://randomuser.me/api/portraits/men/19.jpg', content: '《文明6》让我熬夜了好几个晚上', position: 200, top: Math.random() * 80 + 10 },
  { id: 6, avatar: 'https://randomuser.me/api/portraits/women/88.jpg', content: '《星露谷物语》治愈了我的焦虑', position: 120, top: Math.random() * 80 + 10 },
  { id: 7, avatar: 'https://randomuser.me/api/portraits/men/42.jpg', content: '《鬼泣5》的战斗系统太爽了！', position: 170, top: Math.random() * 80 + 10 },
  { id: 8, avatar: 'https://randomuser.me/api/portraits/women/35.jpg', content: '《底特律：变人》的剧情选择真的很有深度', position: 80, top: Math.random() * 80 + 10 },
  { id: 9, avatar: 'https://randomuser.me/api/portraits/men/51.jpg', content: '《战神4》的父子关系刻画得太感人了', position: 30, top: Math.random() * 80 + 10 },
  { id: 10, avatar: 'https://randomuser.me/api/portraits/women/29.jpg', content: '《双人成行》和朋友一起玩真的很欢乐', position: 190, top: Math.random() * 80 + 10 },
  { id: 11, avatar: 'https://randomuser.me/api/portraits/men/63.jpg', content: '《荒野大镖客2》的细节做得太到位了', position: 110, top: Math.random() * 80 + 10 },
  { id: 12, avatar: 'https://randomuser.me/api/portraits/women/47.jpg', content: '《巫师3》的DLC真的值回票价', position: 60, top: Math.random() * 80 + 10 },
  { id: 13, avatar: 'https://randomuser.me/api/portraits/men/25.jpg', content: '《怪物猎人：世界》刷了几百个小时还没腻', position: 140, top: Math.random() * 80 + 10 },
  { id: 14, avatar: 'https://randomuser.me/api/portraits/women/58.jpg', content: '《GTA5》到现在还是那么好玩', position: 90, top: Math.random() * 80 + 10 },
  { id: 15, avatar: 'https://randomuser.me/api/portraits/men/71.jpg', content: '《CS:GO》是我玩过最久的游戏了', position: 20, top: Math.random() * 80 + 10 }
])

// 鼠标移动处理函数，实现视差效果
const handleMouseMove = (e) => {
  const x = e.clientX - window.innerWidth / 2
  const y = e.clientY - window.innerHeight / 2
  mouseX.value = x
  mouseY.value = y
}

// 轮播动画函数 - 优化背景显示效果
const animateBackground = () => {
    scrollOffset.value = (scrollOffset.value + 0.3) % (240 * gameImages.length)
    requestAnimationFrame(animateBackground)
  }

// 弹幕动画函数 - 减慢弹幕移动速度
const animateBulletComments = () => {
    bulletComments.value = bulletComments.value.map(comment => ({
      ...comment,
      position: comment.position <= -100 ? 200 : comment.position - 0.1
    }))
    requestAnimationFrame(animateBulletComments)
  }

// 模拟数据库中的用户数据
const users = JSON.parse(localStorage.getItem('users')) || [
  { id: 1, username: 'admin', password: 'admin123', avatar: 'https://randomuser.me/api/portraits/men/32.jpg' }
]

// 登录函数
const login = () => {
  // 查找匹配的用户
  const user = users.find(u => u.username === username.value && u.password === password.value)
  
  if (user) {
    // 登录成功，保存用户信息到本地存储
    localStorage.setItem('currentUser', JSON.stringify(user))
    // 重定向到首页
    router.push('/')
  } else {
    // 登录失败，显示错误提示
    alert('登录失败，请检查用户名和密码是否正确')
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}

// 组件挂载时启动动画
onMounted(() => {
  animateBackground()
  animateBulletComments()
})

// 组件卸载时清理
onUnmounted(() => {
  // 这里不需要特别的清理，requestAnimationFrame会自动停止
})
</script>

<template>
  <div class="login-container" @mousemove="handleMouseMove">
    <!-- 弹幕容器 - 限制在屏幕上方三分之一 -->
    <div class="bullet-comments-container">
      <div v-for="comment in bulletComments" :key="comment.id" 
           class="bullet-comment" 
           :style="{top: `${comment.top}%`, left: `${comment.position}%`}">
        <img :src="comment.avatar" alt="用户头像" class="comment-avatar">
        <span class="comment-content">{{ comment.content }}</span>
      </div>
    </div>
    
    <!-- 斜向拼接的背景图片网格 -->
    <div class="bg-grid-container" :style="{transform: `translateY(-${scrollOffset}px)`}">
      <div v-for="(img, index) in gameImages" :key="index" 
           class="bg-grid-item" 
           :style="{backgroundImage: `url(${img})`}">
      </div>
    </div>
    
    <!-- 渐变覆盖层 -->
    <div class="bg-gradient-overlay"></div>
    
    <!-- 登录表单 -->
    <div class="login-form" :style="{transform: `translate(${mouseX * 0.02}px, ${mouseY * 0.02}px)`}">
      <h2>游戏玩家登录</h2>
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          id="username"
          v-model="username"
          type="text"
          placeholder="请输入用户名"
          required
        />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          id="password"
          v-model="password"
          type="password"
          placeholder="请输入密码"
          required
        />
      </div>
      <div class="form-actions">
        <button @click="login" class="btn-login">登录</button>
        <button @click="goToRegister" class="btn-register">注册</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

/* 斜向拼接的背景图片网格 - 避免重叠 */
.bg-grid-container {
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 200%;
  transform: rotate(-45deg) scale(1.5);
  transform-origin: center center;
  z-index: 0;
  transition: transform 0.5s ease-out;
  display: grid;
  grid-template-columns: repeat(6, 300px);
  grid-template-rows: repeat(10, 300px);
  gap: 30px;
  padding: 30px;
  pointer-events: none;
}

/* 背景网格中的每个图片项 - 确保不重叠 */
.bg-grid-item {
  width: 240px;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transform: rotate(45deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0.9; /* 增加亮度 */
  border: 5px solid rgba(0, 0, 0, 0.2);
  filter: brightness(1.1); /* 增加亮度 */
  overflow: hidden;
}

/* 为不同位置的图片添加随机的小旋转角度，增强立体感 */
.bg-grid-item:nth-child(odd) {
  transform: rotate(45deg) scale(0.95) translateY(5px);
}

.bg-grid-item:nth-child(even) {
  transform: rotate(45deg) scale(1.05) translateY(-5px);
}

/* 鼠标悬停效果，增强交互感 */
.bg-grid-container:hover .bg-grid-item:hover {
  transform: rotate(45deg) scale(1.1);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
  opacity: 1;
  z-index: 1;
}

/* 渐变覆盖层 */
.bg-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(10, 10, 10, 0.9) 40%, 
    rgba(15, 15, 15, 0.85) 70%, 
    rgba(20, 20, 20, 0.95) 100%
  );
  z-index: 2;
}

/* 登录表单样式 */
.login-form {
  background-color: rgba(26, 26, 26, 0.9);
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.login-form h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #ffffff;
  font-size: 1.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #4CAF50, #2196F3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  color: #ccc;
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-group input {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus {
  border-color: #4CAF50;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.form-group input::placeholder {
  color: #666;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-login, .btn-register {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.btn-login {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-register {
  background: linear-gradient(135deg, #2196F3, #0b7dda);
  color: white;
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

.btn-login:active, .btn-register:active {
  transform: translateY(0);
}

/* 弹幕样式 - 限制在屏幕上方三分之一 */
.bullet-comments-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 33.33vh;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.bullet-comment {
  position: absolute;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 8px 12px;
  border-radius: 20px;
  white-space: nowrap;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.comment-content {
  color: white;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bg-grid-container {
    grid-template-columns: repeat(3, 300px);
    grid-template-rows: repeat(15, 300px);
  }
  
  .login-form {
    margin: 2rem;
    padding: 2rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .comment-content {
    font-size: 12px;
    max-width: 150px;
  }
}
</style>